<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
  .button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }

  .button-wrapper p {
    background-color: darkcyan;
  }

.button-wrapper p:hover {
  cursor: pointer;
}

  .popups {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    width: 100%;
    height: 100%;
    display: none;
  }

  .popups svg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<div class="button-wrapper">
  <p onclick="$('.popups').fadeIn(500)">Icon font!</button>
</div>
<div class="popups" onclick="$('.popups').fadeOut(500);">
  <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="128px" height="128px" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve" p-id="125">
    <g p-id="126">
      <path fill="#FF0000" d="M546.368,141.385c-5.099-5.25-4.062-13.343-2.823-26.681c1.665-17.962-33.868,8.208-55.655,25.83C311.533,152.947,172.314,299.94,172.314,479.458c0,187.656,152.124,339.78,339.78,339.78s339.78-152.124,339.78-339.78C851.878,303.371,717.929,158.569,546.368,141.385z" p-id="127"></path>
      <path fill="#FFFFFF" d="M820.57,500.997c-2.099-44.066-11.937-84.195-29.512-120.393c-17.571-36.199-40.392-67.151-68.459-92.852c-28.068-25.706-60.197-45.642-96.395-59.806c-33.411-13.076-68.386-20.099-104.925-21.106c-6.211,5.916-11.887,15.759,1.374,26.542c21.357,17.369-10.443,28.459-27.224,23.94c17.606,2.555,48.79-6.625,18.682-24.974c-13.35-8.243-9.904-18.976-5.727-25.605c-37.5,0.453-73.768,7.767-108.809,21.989c-36.199,14.69-68.328,35.145-96.395,61.378c-28.068,26.228-51.016,57.312-68.854,93.247s-28.068,75.15-30.689,117.641c-2.099,36.199,1.444,69.772,10.625,100.724c9.184,30.952,22.426,58.756,39.741,83.413c17.311,24.656,38.165,45.77,62.559,63.345s50.757,31.084,79.084,40.523c5.246,1.576,11.407,4.201,18.492,7.868c7.082,3.674,13.904,8.003,20.459,12.986c6.559,4.983,12.723,10.23,18.496,15.735c5.769,5.51,10.23,10.625,13.378,15.344c7.341,12.065,13.114,22.953,17.311,32.66c4.193,9.703,7.868,18.097,11.016,25.183c3.148,7.082,6.032,12.588,8.658,16.525c2.621,3.934,6.029,5.897,10.23,5.897c3.674,0,7.082-2.23,10.23-6.687c3.148-4.46,6.296-10.489,9.444-18.101c3.148-7.604,6.818-16.13,11.016-25.57c4.193-9.444,9.44-18.887,15.736-28.331c7.345-11.016,17.443-21.772,30.294-32.261c12.851-10.497,24.788-17.838,35.804-22.035c28.327-10.497,54.819-24.265,79.475-41.317c24.656-17.048,45.774-37.507,63.345-61.374c17.575-23.87,31.084-51.152,40.527-81.841C818.994,573,822.664,538.772,820.57,500.997z" p-id="128" data-spm-anchor-id="a313x.7781069.1998910419.i0"></path>
    </g>
    <path opacity="0" fill="#FF0000" d="M913.032,259.178c0,0,0-2.483,11.174-3.726c11.174-1.243,38.486-3.726,48.417,2.483c9.93,6.208,6.208,13.656-2.483,23.587s-32.278,28.552-32.278,32.278c0,3.726,22.347,1.243,29.795-1.243c7.448-2.483,12.413,7.448,8.691,11.174c-3.726,3.726-45.934,22.347-57.107,12.413c-11.174-9.934,19.865-44.694,29.795-53.382c9.93-8.691,14.899-17.382,11.174-17.382c-3.726,0-34.76,7.448-40.969,3.726C913.032,265.383,906.823,259.178,913.032,259.178z" p-id="129">
      <animate attributeName="opacity" from="0" values="0;1;0;0;0" begin="1s" dur="2.5s" repeatCount="indefinite"
        p-id="130"></animate>
    </path>
    <path opacity="0" fill="#F98080" d="M888.454,404.125c0,0,0-1.546,6.953-2.318s23.955-2.318,30.137,1.546c6.182,3.864,3.864,8.499-1.546,14.681c-5.41,6.182-20.091,17.773-20.091,20.091s13.909,0.771,18.545-0.771c4.635-1.543,7.728,4.635,5.41,6.953c-2.318,2.318-28.59,13.909-35.547,7.728c-6.953-6.182,12.363-27.819,18.545-33.225c6.182-5.41,9.274-10.817,6.953-10.817c-2.318,0-21.637,4.635-25.501,2.318C888.454,407.989,884.59,404.125,888.454,404.125z" p-id="131">
      <animate attributeName="opacity" from="0" values="0;1;0;0;0" begin="0.5s" dur="2.5s" repeatCount="indefinite"
        p-id="132"></animate>
    </path>
    <path opacity="0" fill="#FFCCCC"
      d="M869.134,486.026c0,0,0-1.174,5.276-1.757c5.276-0.587,18.172-1.757,22.861,1.174c4.689,2.932,2.932,6.446-1.174,11.135c-4.102,4.689-15.241,13.484-15.241,15.241c0,1.757,10.552,0.587,14.067-0.587c3.519-1.174,5.863,3.519,4.102,5.276c-1.757,1.757-21.687,10.552-26.963,5.863c-5.276-4.689,9.378-21.1,14.067-25.206c4.689-4.106,7.033-8.208,5.276-8.208c-1.757,0-16.411,3.519-19.343,1.757C869.134,488.958,866.202,486.026,869.134,486.026z" p-id="133">
      <animate attributeName="opacity" from="0" values="0;1;0;0;0" begin="0s" dur="2.5s" repeatCount="indefinite"
        p-id="134"></animate>
    </path>
    <g p-id="135">
      <path fill="#FF0000" d="M512.701,628.298c-0.756,4.397-1.512,9.182-2.272,14.362c-0.756,5.18-3.599,8.714-8.522,10.598c-2.272,0.94-5.023,1.412-8.238,1.412c-3.223,0-6.251-0.472-9.094-1.412c-2.839-0.944-5.207-2.513-7.103-4.708c-1.895-2.199-2.839-5.027-2.839-8.48c0-3.768,0.948-7.613,2.839-11.538c1.895-3.925,4.263-7.536,7.103-10.832c2.839-3.296,6.059-6.043,9.662-8.242c3.599-2.195,7.099-3.611,10.514-4.236c2.651-0.315,4.543,0.315,5.683,1.884c1.14,1.569,1.992,3.534,2.559,5.886c0.568,2.356,0.76,4.946,0.568,7.77C513.365,623.586,513.077,626.096,512.701,628.298z" p-id="136">
      </path>
      <path fill="#FF0000" d="M557.304,648.547c-2.084,2.195-4.543,3.768-7.386,4.708c-2.839,0.94-5.775,1.412-8.806,1.412c-3.027,0-5.683-0.472-7.954-1.412c-4.927-1.884-7.954-5.418-9.09-10.598c-1.14-5.18-1.896-9.969-2.272-14.362c-0.38-2.195-0.568-4.708-0.568-7.536c0-2.824,0.192-5.414,0.568-7.77c0.38-2.356,1.232-4.317,2.555-5.886c1.328-1.569,3.319-2.199,5.967-1.884c3.411,0.629,6.914,2.041,10.514,4.236c3.599,2.199,6.819,4.946,9.658,8.242s5.207,6.907,7.102,10.832c1.896,3.922,2.839,7.77,2.839,11.538C560.427,643.524,559.387,646.348,557.304,648.547z" p-id="137"></path>
      <path fill="#FF0000" d="M590.94,542.125c0,3.392-1.719,6.139-3.837,6.139H433.619c-2.118,0-3.837-2.747-3.837-6.139l0,0c0-3.392,1.719-6.139,3.837-6.139h153.484C589.224,535.986,590.94,538.733,590.94,542.125L590.94,542.125z" p-id="138">
      </path>
      <g p-id="139">
        <g p-id="140">
          <circle fill="#FFD9D9" cx="333.881" cy="544.684" r="97.205" p-id="141"></circle>
          <path fill="#FF0000" d="M333.881,647.645c-56.774,0-102.961-46.191-102.961-102.961c0-56.77,46.191-102.961,102.961-102.961s102.961,46.187,102.961,102.961C436.842,601.458,390.655,647.645,333.881,647.645z M333.881,453.231c-50.427,0-91.45,41.022-91.45,91.449s41.026,91.453,91.45,91.453s91.449-41.026,91.449-91.449S384.308,453.231,333.881,453.231z" p-id="142"></path>
        </g>
        <path fill="#FF0000" d="M364.014,568.589c-3.933,2.084-8.461,3.703-13.591,4.858c-5.13,1.155-10.644,1.738-16.542,1.738c-5.898,0-11.412-0.576-16.542-1.738c-5.13-1.155-9.658-2.778-13.591-4.858c-3.933-2.08-6.984-4.482-9.167-7.198c29.549,5.959,50.496,5.303,78.607,0C370.997,564.104,367.939,566.51,364.014,568.589z" p-id="143"></path>
        <g p-id="144">
          <circle fill="#FFD9D9" cx="691.053" cy="544.684" r="97.205" p-id="145"></circle>
          <path fill="#FF0000" d="M691.053,647.645c-56.774,0-102.961-46.191-102.961-102.961c0-56.77,46.187-102.961,102.961-102.961s102.961,46.187,102.961,102.961C794.014,601.458,747.823,647.645,691.053,647.645z M691.053,453.231c-50.427,0-91.45,41.022-91.45,91.449s41.022,91.453,91.45,91.453c50.427,0,91.45-41.026,91.45-91.449S741.477,453.231,691.053,453.231z" p-id="146"></path>
        </g>
        <path fill="#FF0000" d="M721.182,564.752c-3.933,2.084-8.461,3.703-13.591,4.858c-5.13,1.155-10.644,1.738-16.542,1.738c-5.898,0-11.411-0.576-16.542-1.738c-5.13-1.155-9.658-2.778-13.591-4.858c-3.933-2.08-6.984-4.482-9.167-7.198c29.549,5.959,50.496,5.303,78.607,0C728.169,560.267,725.111,562.673,721.182,564.752z" p-id="147"></path>
      </g>
    </g>
  </svg>
</div>